<template>
    <div ref="statisticsRef" class="">
        <div class="flex gap-16px mt-16px">
            <insureData class="flex-1" title="保险数据" select-oneline layout="short" type="fullEnd" :list="Object.values(list)"
                show-company show-type show-plan v-model:date-value="dateList"
                v-model:select-insure-company-value="selectInsureCompanyValue" v-model:select-type-value="selectTypeValue"
                v-model:select-plan-value="selectPlanValue" @change="getData" insure-type="dashboardLong" />
            <insureData class="flex-1" title="运营数据" select-oneline layout="short" :list="Object.values(listOperate)"
                v-model:date-value="dateList1" @change="getOperationData" />
        </div>
        <div class="mg-t-16">
            <otherData ref="otherDataRef" layout="short" v-model:select-value="selectValue" insure-type="dashboardLong" :query-data="queryData"/>
        </div>
        <div class="flex gap-16px mt-16px">
            <chartInsureType ref="chartInsureTypeRef" class="flex-1 !h-303px" insure-type="dashboardLong" :query-data="queryData" />
            <trendData ref="trendDataRef" class="flex-1 !h-303px" insure-type="dashboardLong" :query-data="queryData"/>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import insureData from '@/views/clients/dealClient/components/insureData.vue'
import otherData from '@/views/clients/dealClient/components/otherData.vue'
import chartInsureType from '@/views/clients/dealClient/components/chartInsureType.vue'
import trendData from '@/views/clients/dealClient/components/trendData.vue'

import { getPeriodData, getPeriodOperateData } from '@/api/dashboard/longTerm.ts'

const statisticsRef = ref(null)
const otherDataRef = ref(null)
const chartInsureTypeRef = ref(null)

const dateList = ref([])
const selectInsureCompanyValue = ref('')
const selectTypeValue = ref('')
const selectPlanValue = ref('')


const dateList1 = ref([])
const selectValue = ref('')

const props = defineProps({
    queryData: {
        type: Object,
        default() {
            return {}
        }
    }
})

const list = ref({
    periodPremiumCount: {
        name: '总保费',
        hint: '',
        value: '',
        suffix: '元',
        decimal: 2
    },
    rebateAmountCount: {
        name: '返利',
        hint: '',
        value: '',
        suffix: '元',
        decimal: 2
    },
    achievementAmount: {
        name: '业绩保费',
        hint: '业绩保费=总保费-返利；返利：每月返利给符合条件的公司',
        value: '',
        suffix: '元',
        decimal: 2
    }
})

const listOperate = ref({
    openCount: {
        name: '开通客户',
        hint: '',
        value: '',
        suffix: '人',
    },
    rechargeAmount: {
        name: '充值金额',
        hint: '',
        value: '',
        suffix: '元',
        decimal: 2
    },
    rechargeCustomers: {
        name: '充值客户数',
        hint: '',
        value: '',
        suffix: '人',
    },
    rechargeAndUse: {
        name: '使用充值客户数',
        hint: '',
        value: '',
        suffix: '人',
    },
})

const resize = () => {
    console.log(1234)
    // chartBarRef.value.resize()
    // chartPieRef.value.resize()
}
// 保险数据
const getData = () => {
    getPeriodData({
        ...props.queryData,
        insurCompany: selectInsureCompanyValue.value,
        insuranceMethod: selectTypeValue.value,
        insurCompanyPlanCode: selectPlanValue.value,
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : ''
    }).then(res => {
        console.log(res, 'resresresres')
        for (const key in list.value) {
            list.value[key].value = res[key]
        }
    })
}
// 运营数据
const getOperationData = () => {
    getPeriodOperateData({
        ...props.queryData,
        startTime: dateList1.value?.length ? dateList1.value[0] : '',
        endTime: dateList1.value?.length ? dateList1.value[1] : ''
    }).then(res => {
        for (const key in listOperate.value) {
            listOperate.value[key].value = res[key]
        }
    })
}

const refreshData = () => {
    otherDataRef.value.getData()
    chartInsureTypeRef.value.getDataByType()
}

// const getOtherData = () => {

// }

watch(dateList, (newval) => {
    console.log(newval, 'newvalnewvalnewval')
    getData()
}, {
    deep: true
})

watch(props, (newval) => {
    getData()
    getOperationData()
}, {
    deep: true
})


defineExpose({
    statisticsRef,
    resize,
    getData,
    getOperationData,
    refreshData
})
</script>
<style lang="scss" scoped>
.h-300 {
    height: 303px;
}
</style>